<template>
  <el-select
    v-model="tanent"
    placeholder="请选择租户"
    size="small"
    @change="onChange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  <el-tree
    class="mt10"
    :data="data"
    :props="defaultProps"
    @node-click="handleNodeClick"
  />
</template>

<script setup>
import { ref, watch, computed } from "vue";
import { useStore } from "vuex";
const store = useStore();
const options = ref([]);
const tanent = ref("");
const data = ref([]);
watch(
  computed(() => store.state.tenantOpts),
  (e) => {
    options.value = e;
    tanent.value = e[0].value;
    store.dispatch("getPark");
  }
);
watch(
  computed(() => store.state.parkOpts),
  (e) => {
    data.value = e.map((item) => {
      const children = item.children.map((child) => {
        return {
          ...child,
          label: child.name,
        };
      });
      return {
        ...item,
        children,
      };
    });
    if (data?.value[0]?.value) {
      store.commit("setParkId", data.value[0].value);
    }
  }
);
const handleNodeClick = (data) => {
  console.log(data);
  if (data.value) {
    store.commit("setParkId", data.value);
  } else {
    store.commit("setFaci", data.id);
    store.commit("setfacilitieName", data.name);
  }
};

const onChange = () => {
  data.value = [];
  store.commit("setTenantId", tanent.value);
  store.dispatch("getPark");
};

const defaultProps = {
  children: "children",
  label: "label",
};
</script>

<style lang="scss" scoped>
.el-card {
  height: 100%;
}
.el-select {
  width: 120px;
}
.el-select-dropdown__item,
:deep(.el-tree-node__label) {
  font-size: 10px !important;
  padding: 0 !important;
  text-align: center;
}
</style>
